
<style>
    li{list-style: none}
    ul.parents>li{}
    ul.children{margin: 8px 0;}
    ul.children>li{width: 25%; display: inline-block;}
    li .item-check{background: white; padding: 0px 8px;}
</style>

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        管理
        <small>列表</small>
    </h1>
</section>

<!-- Main content -->
<section class="content" id="company-user">

    <div class="row">
        <div class="col-md-6">
            <a class="btn btn-default" @click="getList">刷新</a>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label>选择日期：</label>
                <input class="form-control" type="month" v-model="page.month">
            </div>
        </div>
    </div>

    <div class="row" v-show="show.list">
        <div class="col-md-12">
            <table class="table table-responsive table-striped table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>用户</th>
                    <th>真实姓名</th>
                    <th>昵称</th>
                    <th>邀请的用户总数</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in list">
                    <td>{{item.id}}</td>
                    <td>{{item.mobile}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.nickname}}</td>
                    <td>{{item.invited_users_count}}</td>
                    <!--<td>
                        <table class="table table-bordered">
                            <tr>
                                <th>用户</th>
                                <th>昵称</th>
                                <th>注册时间</th>
                            </tr>
                            <tr v-for="user in item.invited_users">
                                <td>{{user.mobile}}</td>
                                <td>{{user.nickname}}</td>
                                <td>{{user.regtime}}</td>
                            </tr>
                        </table>
                    </td>-->
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="100">
                        <page :rows="page.rows" :last="page.last" v-model="page.page"></page>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

</section>
<!-- /.content -->

<script>
    var date=new Date();
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    var month=y+"-"+(m<10?"0"+m:m);
    var company_user= new Vue({
        el: '#company-user',
        data: {
            list: [],
            page: {
                last: 1,
                page: 1,
                rows: 50,
                month:month
            },
            show: {
                list: true,
            },
        },
        created: function () {
            this.getList();
        },
        methods: {
            getList: function () {
                ajax({
                    uri: '/user/companyList',
                    data: this.page,
                    success: function(resp){
                        this.list = resp.data.data;
                        this.page.last = resp.data.last_page;
                    }.bind(this)
                });
            },
            
        },
        watch: {
            'page.offset': function (nv, ov) {
                this.getList();
            }
        }
    });
</script>